<template>
<div id="register">
    <header-tab :title="'注册'" />
    <footer-tab/>
    <div class="register_body">
        <div><input v-model="username" class="register_text" type="text" placeHolder="用户名" @input="handleUserTrim" /></div>
        <div><input v-model="email" class="register_text" type="text" placeHolder="Email" @input="handleETrim" /></div>
        <div><input v-model="password" class="register_text" type="password" placeHolder="请输入您的密码" @input="handlePwdTrim" /></div>
        <div class="register_verify">
            <input type="text" v-model="registerVerify" class="register_text" placeHolder="请输入您的验证码" @input="handleVerifyTrim" />
            <button :disabled="disabled" @touchstart="sendRegisterVerifyHandle">{{ verifyInfo }}</button>
        </div>
        <div class="register_btn">
            <input type="submit" :disabled="submitAble" value="注册" @touchstart="registerHandle" />
        </div>
        <div class="register_link">
            <router-link to="/mine/login">立即登录</router-link>
            <!-- <router-link to="/mine">找回密码</router-link> -->
        </div>
        <h3>{{ verifyNumber }}</h3>
    </div>
</div>
</template>

<script>
import HeaderTab from "../HeaderTab"
import FooterTab from "../FooterTab"
export default {
    name: "register",
    data() {
        return {
            username: "",
            email: "",
            password: "",
            registerVerify: "", /* 注册验证码 */
            verifyInfo: "获取验证码",
            disabled: false,
            submitAble: true,
            verifyNumber: ""
        }
    },
    methods: {

        // 不允许输入空格
        handleUserTrim(e) {
            this.username = e.target.value.trim()
        },
        handleETrim(e) {
            this.email = e.target.value.trim()
            // setTimeout(() => {
                if(this.email) {
                    this.disabled = false
                }
            // },100)
        },
        handlePwdTrim(e) {
            this.password = e.target.value.trim()
        },
        handleVerifyTrim(e) {
            this.registerVerify = e.target.value.trim()
        },

        // 注册
        registerHandle() {
            if(this.username === '' || this.password === '' || this.email === '' || this.registerVerify === '') {
                alert("用户名或密码不能为空")
                return;
            }
            this.axios.post("/user/register", {
                "username": this.username,
                "password": this.password,
                "email": this.email,
                "verify": this.registerVerify,
                "tId": "tId_"+this.username+"_"+String(Date.parse(new Date())),
                "isAdmin": false
            }).then(res => {
                // console.log(res)
				switch(res.data.status) {
					case 200: 
						this.$router.push("/mine/login")
					case 300:
					case 302:
						alert(res.data.code)
						break;
				}
            })
            
        },
        
        // 发送验证码
        sendRegisterVerifyHandle() {
            if(this.email === '') {
                alert("邮箱必填，请先填写邮箱")
                this.disabled = true
                return;
            }
            if(this.disabled) return; /* 正在获取验证码时，不允许再次点击 */
            this.countDown()
            console.log("已发送验证码");
                this.axios.get("/user/verify?email="+ this.email).then(res => {
                    if(res.data.status === 200) {
                        setTimeout(() => {
                            this.verifyNumber = res.data.code
                        }, 3000)
                    }
                })
        },

        // 有效验证码倒计时
        countDown () {
            this.disabled = true;
			let count = 60;
			var setTimer = setInterval(() => {
				count--;
				this.verifyInfo = count + "秒";
				if(count === 0) {
                    count = 60;
                    this.verifyInfo = "重新获取验证码";
                    clearInterval(setTimer)
					this.disabled = false;
				}
			}, 1000)
		},
    },
    components: {
        HeaderTab,
        FooterTab
    }
}
</script>

<style scoped>
#register {
	max-width: 768px;
	margin: 0 auto;
}
#register .register_body{  width:100%;margin-top: 10px;}
.register_body .register_text{ width:100%; height: 40px; border:none; border-bottom: 1px #ccc solid; margin-bottom: 5px; outline: none; text-indent: 1em; box-sizing:border-box;}
.register_body .register_btn{ height:50px; margin:10px;}
.register_body .register_btn input{ width:100%; height:100%; background:#e54847; border-radius: 3px; border:none; display: block; color:white; font-size: 20px;}
.register_body .register_verify { display: flex; justify-content: space-between; align-items: center}
.register_body .register_verify button{ border: 0;width: 180px;height: 40px;margin: -5px 8px 0;outline: none;}
.register_body .register_link{ display: flex; justify-content:space-between;}
.register_body .register_link router-link{ text-decoration: none; margin:0 5px; font-size: 12px; color:#e54847;}
</style>